<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">发布职位</div>
        <div>保存</div>
      </div>
    </div>
    <div class="content">
      <div class="inpBox">
        <span>职位名称</span>
        <div>
          <input type="text" placeholder="请输入职位名称" />
        </div>
      </div>
      <div class="inpBox">
        <span>招聘人数</span>
        <div>
          <input type="text" placeholder="请输入招聘人数" />
        </div>
      </div>
      <div class="inpBox">
        <span>工作时长</span>
        <div>
          <input type="text" placeholder="请输入工作时长" />
        </div>
      </div>
      <div class="inpBox">
        <span>职位薪资</span>
        <div @click="prop(2)">
          <input type="text" v-model="payValue" placeholder="请选择薪资范围" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>学历要求</span>
        <div @click="prop(4)">
          <input type="text" v-model="schoolValue" placeholder="请选择学历要求" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>工作年限</span>
        <div @click="prop(5)">
          <input type="text" v-model="ageValue" placeholder="请选择工作年限" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>工作城市</span>
        <div @click="prop(1)">
          <input type="text" v-model="cityValue" placeholder="请选择工作城市" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>职位种类</span>
        <div @click="prop(0)">
          <input type="text" v-model="postValue" placeholder="请选择职位种类" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>职位类型</span>
        <div @click="prop(3)">
          <input type="text" v-model="stateValue" placeholder="请选择职位类型" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>福利待遇</span>
        <div class="welfareClass">
          <span v-for="(item,index) in welfare" :class="{ active: item.type == true }" @click="act(index)">{{item.name}}</span>
        </div>
      </div>
      <div class="inpBoxs">
        <div class="inpBox">
          <span>职位描述</span>
        </div>
        <textarea name="" id="" placeholder="请填写职位描述" v-model="text"></textarea>
      </div>
    </div>
    <mt-popup v-model="postIf" position="bottom">
      <p class="mt-p">
        <span @click="off(0)">取消</span>
        <span v-show="status == 0">请选择区域</span
        ><span v-show="status == 1">请选择方式</span>
        <span @click="on(0)">确定</span>
      </p>
      <mt-picker
        :slots="post"
        @change="postChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>

    <mt-popup v-model="cityIf" position="bottom">
      <p class="mt-p">
        <span @click="off(1)">取消</span> 请选择行业
        <span @click="on(1)">确定</span>
      </p>
      <mt-picker :slots="city" @change="cityOn"></mt-picker>
    </mt-popup>
    <mt-popup v-model="payIf" position="bottom">
      <p class="mt-p">
        <span @click="off(2)">取消</span>请选择薪资
        <span @click="on(2)">确定</span>
      </p>
      <mt-picker
        :slots="payList"
        @change="payChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="schoolIf" position="bottom">
      <p class="mt-p">
        <span @click="off(4)">取消</span>请选择学历
        <span @click="on(4)">确定</span>
      </p>
      <mt-picker
        :slots="schoolList"
        @change="schoolChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="stateIf" position="bottom">
      <p class="mt-p">
        <span @click="off(3)">取消</span> 请选择职位类型
        <span @click="on(3)">确定</span>
      </p>
      <mt-picker
        :slots="stateLimit"
        @change="stateChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="ageIf" position="bottom">
      <p class="mt-p">
        <span @click="off(5)">取消</span> 请选择年限
        <span @click="on(5)">确定</span>
      </p>
      <mt-picker
        :slots="ageLimit"
        @change="ageChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import { Popup, Picker } from "mint-ui";
var arrays = {
  前端开发: {
    不限: "",
    JavaScript: "",
    vue: "",
    HTML5: "",
  },
  后端开发: {
    不限: "",
    C语言: "",
    PHP: "",
    Python: "",
  },
  移动开发: {
    不限: "",
    HTML5: "",
    ios: "",
    微信小程序: "",
  },
  测试: {
    不限: "",
    自动化测试: "",
  },
  数据: {
    不限: "",
    数据架构师: "",
  },
  视觉设计: {
    不限: "",
    UI设计: "",
    网页设计师: "",
    美工: "",
    APP设计师: "",
  },
  交互设计: {
    不限: "",
    网页交互设计师: "",
  },
  用户研究: {
    不限: "",
    数据分析师: "",
    UX设计师: "",
  },
};
var arrays1 = {
  北京: {
  },
  天津: {
  },
  河北省: {
  },
  山西省: {
  },
  内蒙古自治区: {
  },
  辽宁省: {
    大连市: "",
  },
  吉林省: {
  },
  黑龙江省: {
  },
  上海: {
  },
  江苏省: {
  },
  浙江省: {
  },
  安徽省: {
  },
  福建省: {
  },
  江西省: {
  },
  山东省: {
  },
  河南省: {
  },
  湖北省: {
  },
  湖南省: {
  },
  广东省: {
  },
  广西省: {
  },
  海南省: {
  },
  重庆: {
  },
  四川省: {
  },
  贵州省: {
  },
};
var postValue = "";
var cityValue = "";
var payValue = "";
var stateValue = "";
var schoolValue = "";
var ageValue = "";
export default {
  inject: ["reload"],
  name: "work",
  components: {Popup, Picker},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为状态，0是新增，1是修改
      status: localStorage.status,
      city: "",
      post:"",
      state:"",
      postValue: "",
      postIf: false,
      post: [{
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(arrays),
          className: "slot1",
          textAlign: "center",
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center",
        },],
      cityValue: "",
      cityIf: false,
      city: [
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(arrays1),
          className: "slot1",
          textAlign: "center",
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center",
        }
      ],
      payValue: "",
      payIf: false,
      payList: [
        {
          values: ["不限", "2-4K", "4-6K", "6-7K", "7-9K", "10K以上"],
        },
      ],
      pay: [],
      stateValue: "",
      stateIf: false,
      stateLimit: [
        {
          values: ["直招", "外派"],
        },
      ],
      schoolValue: "",
      schoolIf: false,
      schoolList: [
        {
          values: ["不限", "高中", "大专", "本科", "硕士", "博士"],
        },
      ],
      ageValue: "",
      ageIf: false,
      ageLimit: [
        {
          values: ["不限", "1年以内", "1-3年", "3-5年", "5-10年", "10年以上"],
        },
      ],
      welfare:[
        {name:"有车补",type:false},
        {name:"工作餐",type:false},
        {name:"有提成",type:false},
        {name:"管住宿",type:false},
        {name:"五险一金",type:false},
        {name:"双休",type:false},
      ]
    };
  },
  // methods 编写js函数
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    act(i){
      this.welfare[i].type=!this.welfare[i].type;
    },
    prop(i) {
      if (i == 0) {
        this.postIf = !this.postIf;
      } else if (i == 1) {
        this.cityIf = !this.cityIf;
      } else if (i == 2) {
        this.payIf = !this.payIf;
      } else if (i == 3) {
        this.stateIf = !this.stateIf;
      } else if (i == 4) {
        this.schoolIf = !this.schoolIf;
      } else if (i == 5) {
        this.ageIf = !this.ageIf;
      }
    },
    postChange(picker, values) {
      if (arrays[values[0]]) {
        picker.setSlotValues(1, Object.keys(arrays[values[0]]));
        picker.setSlotValues(2, arrays[values[0]][values[1]]);
        if (values[1] == undefined) {
          postValue = values[0];
        } else {
          postValue = values[1];
        }
      }
    },
    cityOn(picker, values) {
      if (arrays1[values[0]]) {
        picker.setSlotValues(1, Object.keys(arrays1[values[0]]));
        picker.setSlotValues(2, arrays1[values[0]][values[1]]);
        if (values[1] == undefined) {
          cityValue = values[0];
        } else {
          cityValue = values[1];
        }
      }
    },
    payChange(picker, values) {
      payValue = picker.values[0];
    },
    schoolChange(picker, values) {
      schoolValue = picker.values[0];
    },
    stateChange(picker, values) {
      stateValue = picker.values[0];
    },
    ageChange(picker, values) {
      ageValue = picker.values[0];
    },
    on(i) {
      if (i == 0) {
        this.postValue = postValue;
        this.postIf = false;
      } else if (i == 1) {
        console.log(cityValue);
        this.cityValue = cityValue;
        this.cityIf = false;
      } else if (i == 2) {
        this.payValue = payValue;
        this.payIf = false;
      } else if (i == 3) {
        this.stateValue = stateValue;
        this.stateIf = false;
      } else if (i == 4) {
        this.schoolValue = schoolValue;
        this.schoolIf = false;
      } else if (i == 5) {
        this.ageValue = ageValue;
        this.ageIf = false;
      }
    },
    off(i) {
      if (i == 0) {
        post = "";
        this.postIf = false;
      } else if (i == 1) {
        cityValue = "";
        this.cityIf = false;
      } else if (i == 2) {
        payValue = "";
        this.payIf = false;
      } else if (i == 3) {
        stateValue = "";
        this.stateIf = false;
      } else if (i == 4) {
        schoolValue = "";
        this.schoolIf = false;
      } else if (i == 5) {
        ageValue = "";
        this.ageIf = false;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
}
.inpBox {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}
.inpBox input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 14px;
  height: 30px;
  text-align: right;
}
.inpBox div {
  display: flex;
  align-items: center;
}
.inpBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.inpBoxs .inpBox{
    border: 0;
}
.inpBoxs textarea{
    width: 100%;
    height: 150px;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 10px;
}
.welfareClass{
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  box-sizing: border-box;
  justify-content: flex-end;
}
.welfareClass span{
  padding: 3px 5px;
  border: 1px solid #eee;
  margin-right: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}
.active{
  background: #3e63a8;
  color: #fff;
  border-color: #3e63a8 !important;
}
</style>
